import type { RootState } from '../../store'
import { setThemeConfig } from '../../store/modules/global'
import { Switch } from 'antd'
import { useDispatch, useSelector } from'react-redux'

const SwitchDark = () => {
  const { themeConfig } = useSelector((state: RootState) => state.global)
  const dispatch = useDispatch()
  const onChange = (checked: boolean) => {
    dispatch(setThemeConfig({...themeConfig, isDark: checked }))
  }
  return (
    <Switch 
      className='dark'
      defaultChecked={themeConfig.isDark}
      onChange={onChange}
      checkedChildren={<>🌞</>}
      unCheckedChildren={<>🌛</>}
    />
  )
}

export default SwitchDark